<template>
    <div class="wrapper">
        <div class="q-and-a" v-for="qa in logs">
            <p class="q">{{ qa.q }}</p>
            <p class="a" v-if="typeof qa.a === 'object'">
                <!-- note (again!) if you use render() in a component, then you should
                     not use template! -->
                <!--json-formatter is called here, but...-->
                <c-json-formatter :jsonData="qa.a"/>
            </p>
            <p class="a" v-else>{{ qa.a }}</p>
        </div>
        <div class="prompt-wrapper">
            <span class="hint">Ctrl + Enter to fire!</span>
            <textarea v-model="command" placeholder="what to do next?"
                      @keyup.ctrl.enter="handleCommandSubmit"
                      @keyup.ctrl.up="handleGetPreviousCommand"
                      @keyup.ctrl.down="handleGetNextCommand"
                      class="control"></textarea>
        </div>

    </div>
</template>

<script>

    // fixme autosize is a third party plugin, and when I use it I have to do some modification
    // to suit my need. how to internalize the change?
    import autosize from './js/autosize';
    import JsonFormatter from './components/json-formatter';

    export default {
        name: 'console',
        data: function() {
            return {
                logs: [
                    {
                        q: 'how are you?',
                        a: 'I\'m eatin\' a frog.'
                    },
                ],
                command: 'Simple text here is far from enough!',
                history: ['Yes! You can hit Ctrl + UP for previous actions!',
                    'get /blog/4',
                    'get /home/5',
                    'get /person/1'
                ],
                historyIndex: 1,
            };
        },
        components: {
            'c-json-formatter': JsonFormatter,
        },
        methods: {
            handleCommandSubmit() {
                if (this.command) {
                    // fetch data
                    // todo add post/put/delete support
                    if (this.command.trim().toLowerCase().startsWith('get')) {
                        var thatCommand = this.command.trim();
                        var url = thatCommand.replace(/^get\s*/, '');
                        this.$axios.get(url)
                            .then(result => {
                                if (result.data) {

                                    // console.log(result.data);

                                    var contentType = result.headers['content-type'];
                                    if (contentType.toLowerCase().startsWith('application/json')) {
                                        // console.info('json string detected!');
                                    }

                                    this.logs.push({
                                        q: thatCommand,
                                        a: result.data,
                                    });
                                }
                            });
                    } else {
                        // simply put the result
                        this.logs.push({
                            q: `command #${this.logs.length + 1}:`,
                            a: this.command,
                        });
                    }
                    this.history.push(this.command);
                    this.historyIndex = this.history.length - 1;
                    this.command = '';
                }
            },
            handleGetPreviousCommand() {
                this.command = this.history[this.historyIndex];
                this.historyIndex =
                    this.historyIndex === 0 ? 0
                                            : this.historyIndex - 1;
            },
            handleGetNextCommand() {
                var max = this.history.length - 1;
                this.historyIndex =
                    this.historyIndex === max ? max
                                              : this.historyIndex + 1;
                this.command = this.history[this.historyIndex];
            }
        },
        mounted() {
            this.$axios.get('/blog/4')
                .then(result => result.data)
                .then(data => {
                    this.logs = [];
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        this.logs.push({
                            q: `李四的第${i+1}条状态：`,
                            a: '> ' + item.content
                        });
                    }
                });

            // enable auto-grow of the textarea (the plugin is slightly modified)
            autosize(document.querySelector('textarea'));
        },
        watch: {
            logs: function() {
                var that = this;
                this.$nextTick(function() {
                    var wrapper = that.$el;
                    wrapper.scrollTop = wrapper.scrollHeight;
                });
            },
        }
    };

</script>

<style scoped>
    .wrapper {
        background-color: #2c2c2c;
        color: #5adb4a;
        font-size: small;
        width: 100%;
        height: 100vh;
        padding: 16px 16px 60px;
        overflow-y: scroll;
    }
    .q-and-a {
        box-sizing: border-box;
        border: 2px solid #68603f;
        border-left: 5px solid #68603f;
        padding: 8px;
        margin-bottom: 8px;
    }
    .q-and-a .a {
        color: #9e9763;
    }

    .prompt-wrapper {
        position: fixed;
        background-color: #464646;
        bottom: 0;
        left: 0;
        right: 0;
        font-family: Consolas, "Courier New", monospace;
    }
    .control {
        display: block;
        width: 100%;
        min-height: 50px;
        max-height: 40vh;
        resize: none;
        padding: 3px 8px;
        border: none;
        border-top: 1px solid gold;
        color: #a7a7a7;
        background-color: transparent;
        font-size: larger;
    }
    .prompt-wrapper > .hint {
        position: absolute;
        bottom: 8px;
        right: 16px;
        color: white;
        background-color: #717171;
        opacity: 0.5;
        display: block;
        border-radius: 999px;
        padding: 1px 5px;
        font-weight: bolder;
    }

</style>